<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2019/1/16
  Time: 10:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Eshop后台登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/login.css" media="all">
    <link id="layuicss-layer" rel="stylesheet" href="https://www.layui.com/admin/std/dist/layuiadmin/layui/css/modules/layer/default/layer.css?v=3.1.1" media="all">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <style>
        #verify {
            height: 40px;
            vertical-align: top;
            font-size: 16px;

        }

        #code_img {
            width: 125px;
            height: 40px;
            cursor: pointer;
            vertical-align: top;
        }
    </style>
</head>
<body layadmin-themealias="default">

<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">

    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>商城后台管理系统</h2>
        </div>

        <form id="myform" action="" method="post">
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                <input type="text" name="adAccount" id="adAccount" lay-verify="adAccount" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-form-item">
                <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                <input type="password" name="adPassword" id="adPassword" lay-verify="adPassword" placeholder="密码" class="layui-input">
            </div>
            <div class="layui-form-item">
                <div class="layui-row">
                    <%--<div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                        <input type="text" name="vercode" id="vercode" lay-verify="vercode" placeholder="图形验证码" class="layui-input">
                    </div>--%>
                    <%--<div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
                        </div>
                    </div>--%>
                        <p>
                            <input placeholder="请输入验证码" type="text" class="topAlign" id="verify" name="verify" required>
                            <canvas width="100" height="40" id="verifyCanvas"></canvas>
                            <img id="code_img">
                        </p>

                </div>
            </div>
            <div class="layui-form-item" style="margin-bottom: -723px;">
                <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                    <span>忘记密码</span><i class="layui-icon layui-icon-ok"></i>
                </div>
                <a href="BgRegist.jsp" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">注册账号</a>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">登 入</button>
            </div>
        </div>
        </form>
    </div>

    <div class="layui-trans layadmin-user-login-footer">

        <p>© 2018 <a href="http://www.layui.com/" target="_blank">layui.com</a></p>
        <p>
            <span><a href="http://www.layui.com/admin/#get" target="_blank">获取授权</a></span>
            <span><a href="http://www.layui.com/admin/pro/" target="_blank">在线演示</a></span>
            <span><a href="http://www.layui.com/admin/" target="_blank">前往官网</a></span>
        </p>
    </div>

</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="js/jquery.min.3.1.0.js"></script>
<script src="js/gVerify.js"></script>
<script>

    var s="";

    var nums = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
        'y', 'z'];

    drawCode();
    // 绘制验证码
    function drawCode() {
        var canvas = document.getElementById("verifyCanvas");  //获取HTML端画布
        var context = canvas.getContext("2d");                 //获取画布2D上下文
        context.fillStyle = "cornflowerblue";                  //画布填充色
        context.fillRect(0, 0, canvas.width, canvas.height);   //清空画布
        context.fillStyle = "white";                           //设置字体颜色
        context.font = "25px Arial";                           //设置字体
        var rand = new Array();
        var x = new Array();
        var y = new Array();
        for (var i = 0; i < 5; i++) {
            rand[i] = nums[Math.floor(Math.random() * nums.length)]
            s+=rand[i];
            x[i] = i * 16 + 10;
            y[i] = Math.random() * 20 + 20;
            context.fillText(rand[i], x[i], y[i]);
        }
        //alert(rand);
        //画3条随机线
        for (var i = 0; i < 3; i++) {
            drawline(canvas, context);
        }

        // 画30个随机点
        for (var i = 0; i < 30; i++) {
            drawDot(canvas, context);
        }
        convertCanvasToImage(canvas)
    }

    // 随机线
    function drawline(canvas, context) {
        context.moveTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));             //随机线的起点x坐标是画布x坐标0位置，y坐标是画布高度的随机数
        context.lineTo(Math.floor(Math.random() * canvas.width), Math.floor(Math.random() * canvas.height));  //随机线的终点x坐标是画布宽度，y坐标是画布高度的随机数
        context.lineWidth = 0.5;                                                  //随机线宽
        context.strokeStyle = 'rgba(50,50,50,0.3)';                               //随机线描边属性
        context.stroke();                                                         //描边，即起点描到终点
    }
    // 随机点(所谓画点其实就是画1px像素的线，方法不再赘述)
    function drawDot(canvas, context) {
        var px = Math.floor(Math.random() * canvas.width);
        var py = Math.floor(Math.random() * canvas.height);
        context.moveTo(px, py);
        context.lineTo(px + 1, py + 1);
        context.lineWidth = 0.2;
        context.stroke();

    }
    // 绘制图片
    function convertCanvasToImage(canvas) {
        document.getElementById("verifyCanvas").style.display = "none";
        var image = document.getElementById("code_img");
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    // 点击图片刷新
    document.getElementById('code_img').onclick = function () {
        s="";
        $('#verifyCanvas').remove();
        $('#verify').after('<canvas width="100" height="40" id="verifyCanvas"></canvas>')
        drawCode();

    }


    //layui
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'user','form', 'layedit', 'laydate'], function(){
            var form=layui.form
                ,layer=layui.layer
                ,layedit=layui.layedit
                ,laydate=layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义规则
        form.verify({
            adAccount: function(value) {
                if (value.length == 0) {
                    return '用户名不能为空';
                }
            }
            ,adPassword: function(value) {
                if (value.length == 0) {
                    return '密码不能为空';
                }
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data) {
            var input = document.getElementById("verify").value;
            if (input.toUpperCase() == s.toUpperCase()) {

                $.ajax({
                    url: "/BgLoginServlet",   //请求路径
                    datatype: "json",//返回的格式
                    data: $("#myform").serialize(), //参数
                    type: "post", //什么请求
                    success: function (data) { //请求成功以后
                        //AJAX成功以后返回的
                        var obj = eval('(' + data + ')');
                        if (obj.ret) {
                            layer.msg("登录成功", {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            });
                            //延时500ms页面跳转
                            setTimeout(function () {
                                var ID = obj.id
                                location.href = "BgLoginEchoServlet";
                            }, 500);

                        } else {
                            layer.msg("登录失败", {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            });

                            //延时500ms页面刷新
                            setTimeout(function () {
                                location.reload();
                            }, 500);
                        }
                    }
                });
            }else {
                alert("验证码错误")


            }
            return false;
        });
    });
</script>
<script>

</script>

<style id="LAY_layadmin_theme">.layui-side-menu,.layadmin-pagetabs .layui-tab-title li:after,.layadmin-pagetabs .layui-tab-title li.layui-this:after,.layui-layer-admin .layui-layer-title,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child{background-color:#20222A !important;}.layui-nav-tree .layui-this,.layui-nav-tree .layui-this>a,.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background-color:#009688 !important;}.layui-layout-admin .layui-logo{background-color:#20222A !important;}</style><div class="layui-layer-move"></div>
</body>
</html>
